<script>
import {getUser} from "../../utils/utils";

export default {
  name: "ImportantEvents",
  data(){
    return{
      user:{},
      pageInfo:{},
      babyId:0,
      babyIds:[],
      pageSize:3,
      babies:[],
      fileList:[],
      form:{
        babyId:'',
        discribe:'',
        tags:[],
        date:''
      },
      dialogFormVisible:false,
      ditags:[
        {id:1,tag:'第一次听'},
        {id:2,tag:'第一次叫妈妈'},
        {id:3,tag:'第一次叫爸爸'},
        {id:4,tag:'第一次咿呀语'},
        {id:5,tag:'第一次艺术照'},
        {id:6,tag:'第一次吃药'},
        {id:7,tag:'第一次理发'},
        {id:8,tag:'第一次看电视'},
        {id:9,tag:'第一次打针'}
      ],
      mytag:'',
      mytagtype:'',
    }
  },
  methods:{
    changeBaby(babyId){
      if(babyId!==0){
        this.form.babyId=babyId
      }
      this.babyId=babyId
      this.paging(1)
    },
    deletething(id){
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/thing/del?id='+id).then(resp=>{
          if(resp.data){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败，请联系管理员！'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose(){
      this.form.babyId=''
      this.form.discribe=''
      this.form.tags=[]
      this.form.date=''
      this.fileList=[]
      this.mytag=''
      this.mytagtype=''
      this.dialogFormVisible=false
    },
    upload(){
      if (!this.form.babyId){
        alert('请选择宝宝')
        return
      }else if (!this.form.date){
        alert('请选择日期')
        return
      }else if (this.form.tags.length===0){
        alert('请选择标签')
        return
      }else if (this.fileList.length===0){
        alert('请上传图片')
        return
      }else {
        let fd=new FormData
        Object.keys(this.form).forEach(key=>{
          fd.append(key, this.form[key])
        })
        this.fileList.forEach(file => {
          fd.append('photos', file.raw)
        })
        this.$axios.post('thing/add',fd).then(resp=>{
          alert(resp.data)
          this.handleClose()
          this.paging(1)
        })
      }
    },
    handleChange(file){
      this.fileList.push(file)
    },
    handleRemove(file, fileList){
      this.fileList=fileList
    },
    delmytag(index){
      this.form.tags.splice(index,1)
    },
    addtag(){
      if(this.mytag!==''){
        if (this.mytagtype==='0'||this.mytagtype===''){
          this.form.tags.push(this.mytag)
        }else if (this.mytagtype==='1'){
          this.mytag='第一次'+this.mytag
          this.form.tags.push(this.mytag)
        }else if (this.mytagtype==='2'){
          this.mytag='第二次'+this.mytag
          this.form.tags.push(this.mytag)
        }else if (this.mytagtype==='3'){
          this.mytag='第三次'+this.mytag
          this.form.tags.push(this.mytag)
        }
        this.mytag=''
      }
    },
    add(){
      this.dialogFormVisible=true
    },
    paging(curPage){
      if(this.babyId===0){
        this.$axios.get("/thing/list?babyIds="+this.babyIds+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }else {
        this.$axios.get("/thing/list?babyIds="+this.babyId+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }
    },
    getBabies(){
      this.$axios.get('babyPic/getBabies?userId=' + this.user.id).then(resp=>{
        this.babies=resp.data
        this.babyIds=[]
        this.babies.forEach(baby=>{
          this.babyIds.push(baby.id)
        })
        this.paging(1)
      })
    }
  },
  created() {
    this.user=getUser()
    this.getBabies()
  }
}
</script>

<template>
<div>
  <el-button type="primary" @click="add">添加</el-button>
  <div class="mainuse">
    <div>
      <el-card shadow="hover" style="width: 98%; height: auto" v-for="thing in pageInfo.list">
        <div slot="header" class="clearfix">
          <span>{{thing.date}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="deletething(thing.id)">删除</el-button>
        </div>
        <div  style="height: 180px;overflow:auto">
          <el-image v-for="url in thing.photopaths" :src="url"></el-image>
        </div>
        <div>
          <span>{{thing.discribe}}</span>
        </div>
        <el-divider></el-divider>
        <el-tag type="info" v-for="tag in thing.tags">
          {{tag}}
        </el-tag>
      </el-card>
    </div>
  </div>
  <el-dialog
    title="添加"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="选择宝宝：">
        <el-select v-model="form.babyId" placeholder="请选择宝宝"  style="width: 300px">
          <el-option
            v-for="baby in babies"
            :key="baby.id"
            :label="baby.name"
            :value="baby.id">
            <span style="float: left">{{ baby.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ baby.petName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input v-model="form.discribe" style="width: 90%"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-checkbox-group v-model="form.tags">
          <el-checkbox
            v-for="tag in ditags"
            :label="tag.tag"
            :key="tag.id"
            name="tags"
          ></el-checkbox>
        </el-checkbox-group>
        <div>
          <el-select v-model="mytagtype" placeholder="请选择" style="width: 100px">
            <el-option label="第一次" value="1"></el-option>
            <el-option label="第二次" value="2"></el-option>
            <el-option label="第三次" value="3"></el-option>
            <el-option label="无" value="0"></el-option>
          </el-select>
          <el-input placeholder="自定义标签（11字以内）" v-model="mytag" class="input-with-select" :maxlength="11" style="width: 500px"></el-input>
          <el-button icon="el-icon-caret-top" @click="addtag"></el-button>
          <el-tag type="message" v-for="(tag,index) in form.tags" :key="index">
            <span @click="delmytag(index)" >{{tag}}</span>
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item label="日期：">
        <el-col :span="11" style="width: 300px" >
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="照片">
        <el-upload
          :auto-upload="false"
          :on-change="handleChange"
          :on-remove="handleRemove"
          multiple
          :limit="9"
          list-type="picture-card"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，最多上传9张</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="upload">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>
.mainuse{
  margin-top: 10px;
  padding-left: 10px;
  column-count: 3;
  column-gap: 0;
  margin-bottom: 150px;
}
</style>
